<template>
    <div class="resume">
        <!-- 基本信息 -->
        <div class="resume-basic wow fadeInDown" >
            <div class="name">王非凡</div>
            <div class="position">河北科技师范学院 · 本科 · 24</div>
        </div>
        <!-- 工作经历  -->
        <div class="resume-work-experience">
            <div class="title wow fadeInDown">工作经历</div>
            <div class="inner">
                <div class="left wow fadeInDown">
                    <img src="@/assets/resume/about_1.png" alt="">
                </div>
                <div class="right wow fadeInDown">
                    <div class="corporation">北京晟融信息技术有限公司</div>
                    <div class="department">安知技术部 · 前端开发工程师</div>
                    <div class="detail d1">安知项目的迭代与维护，安知子项目的功能迭代与优化，安知相关联的项目的设计与开发。</div>
                    <div class="detail">工作期间与团队成员历经100多次项目迭代，经手3个项目上线，推进10余个项目的迭代更新。</div>
                    <div class="detail">掌握技能：Vue TS React 小程序 ES6 Express MongoDB</div>
                </div>
            </div>
        </div>
        <!-- 项目经历 -->
        <div class="resume-project-experience">
            <div class="title wow fadeInDown">
                项目经历
            </div>
            <div class="inner">
                <div class="item1 wow fadeInDown">
                    <div class="item-title">安知职业培训平台 · 开发者</div>
                    <div class="date">2022.06-2023.04</div>
                    <div class="detail">项目概况：自主研发的职业培训平台，为职业化人群提供职业技能、安全生产、职业健康、职业规划、就业社保等全维度服务。</div>
                    <div class="detail">项目技术：项目主要为 Vue和 Element UI  搭建，使用 less  进行样式预处理，使用 Vue-Router  进行页面跳转，使用 Vuex  管理通用的集中数据。</div>
                    <div class="detail">项目职责：负责项目的新功能开发与维护，实现产品的需求，多次独立负责某个模块或者核心功能的开发。负责与该项目关联的其他项目，多次参与小程序，移动端h5的迭代。</div>
                    <div class="detail">通过良好的代码结构与 es 6之后的语法，使项目文件精简程度降低约10%，提升运行效率。适量的代码注释降低了他人接手的难度。</div>
                    <div class="detail">项目链接：<a href="https://anzhi.bjsrxx.com/" target="_blank">https://anzhi.bjsrxx.com/</a></div>
                </div>

                <div class="item2 wow fadeInDown">
                    <div class="item-title">H5职业培训平台 · 开发者</div>
                    <div class="date">2022.10-2022.12</div>
                    <div class="detail">项目概况：该项目主要是针对吉安市，报名参加工伤预防课程的员工，进行考试的平台。</div>
                    <div class="detail">项目技术：使用 Vue  框架与 Vant UI  搭建的移动端项目，通过 app  附带 url  参数跳转到该网页，使用 Vue-Router  进行参数抓取，实现身份认证进行考试。</div>
                    <div class="detail">通过良好的代码结构与 es 6之后的语法，使项目文件精简程度降低约10%，提升运行效率。适量的代码注释降低了他人接手的难度。</div>
                    <div class="detail">人员分工：受新冠疫情影响，该项目主要由我负责。通过熟练的所学技术，提前完成项目。从项目确定开发到测试以及上线，超预期1天完成。个人代码贡献量超过80%，测试0 bug。</div>
                </div>
            </div>
        </div>
        <!-- 下载简历 -->
        <div class="resume-download">
            <div class="inner">
                <div class="resume-btn wow fadeInDown" @click="openResume">下载简历</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted } from "vue";
    import WOW from "wow.js";
    import { useResume } from "@/stores/resume";
    const resumeStore=useResume();
    // 下载简历
    function openResume() {
      resumeStore.openResume();
    }
    // 页面挂载
    onMounted(() => {
        // 初始化wowjs
        new WOW({
            offset: 100
        }).init();
    });
</script>

<style scoped lang="scss">
    .resume{
            // 基本信息
        .resume-basic{
            padding: 20px 0;
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: var(--text-color);
            background-color: white;
            .name{
                font-size: 40px;
                margin-bottom: 10px;
            }
            .position{
                font-size: 20px;
            }
        }
        // 工作经历
        .resume-work-experience{
            padding: 20px 0;
            background-color: #f9f9f9;
            color: var(--text-color);
            .title{
                max-width: 800px;
                margin: 0 auto;
                text-align: center;
                font-size: 30px;
                margin-bottom: 30px;
            }
            .inner{
                max-width: 800px;
                margin: 0 auto;
                display: flex;
                .left{
                    width: 400px;
                    flex-shrink: 0;
                    margin-right: 20px;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                .right{
                    display: flex;
                    flex-direction: column;
                    color: var(--text-color);
                    justify-content: center;
                    .corporation{
                        font-size: 30px;
                        margin-bottom: 5px;
                    }
                    .department{
                        font-size: 20px;
                        margin-bottom: 10px;
                    }
                    .detail{
                        font-size: 16px;
                    }
                    .d1{
                        margin-bottom: 5px;
                    }
                }
            }
        }
        .resume-project-experience{
            background-color: white;
            padding: 20px 0;
            color: var(--text-color);
            .title{
                max-width: 800px;
                margin: 0 auto;
                text-align: center;
                font-size: 30px;
                margin-bottom: 30px;
            }
            .inner{
                max-width: 800px;
                margin: 0 auto;
                .item2{
                    margin-top: 30px;
                }
                .item-title{
                    font-size: 20px;
                    margin-bottom: 10px;
                }
                .date{
                    color: gray;
                    margin-bottom: 10px;
                }
                
                .detail{
                    font-size: 16px;
                    margin-bottom: 5px;
                    &:nth-last-child(1){
                        margin-bottom: 0;
                    }
                }
            }
        }
        // 下载简历
        .resume-download{
            background-color: #f9f9f9;
            .inner{
                max-width: 800px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100px;
                .resume-btn {
                    height: 60px;
                    width: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 4px;
                    cursor: pointer;
                    backdrop-filter: blur(2px);
                    border: 3px solid rgba(0, 0, 0, 0.5);
                    color: var(--text-color);
                    font-size: 20px;
                    transition: .2s;

                    &:hover {
                        background-color: rgba(0, 0, 0, 0.5);
                        border: 2px solid transparent;
                        color: white;
                    }
                }
            }
        }
    }
    @media (max-width:760px) {
        .resume {
            .resume-work-experience{
                .inner{
                    flex-direction: column;
                    .left{
                        width: 100%;
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
</style>